<!doctype html>
<html ng-app="mailDevApp" ng-controller="MainCtrl">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>MailDev{{ unreadItems > 0 ? ' (+' + unreadItems + ')' : '' }}</title>
        <meta name="description" content="SMTP Server + Web Interface for viewing and testing emails during development.">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="styles/style.css">
        <link rel="icon" id="favicon" />
    </head>
    <body ng-class="{'dark-theme': settings.darkThemeEnabled}">




        <div class="application-container">





            <div class="sidebar">


                <div class="sidebar-header">
                    <div class="brand-container">
                        <a class="brand ng-cloak" href="#/">
                            <i class="fas fa-envelope"></i>
                            <span class="brand-text">MailDev</span>
                        </a>
                        <span class="brand-unread ng-cloak" title="Total emails count (+ unread emails count)" ng-if="items && items.length" ng-click="toggleHeaderCountsUnread()">
                            {{items.length}} {{ unreadItems > 0 ? ' (+' + unreadItems + ')' : '' }}
                        </span>
                    </div>

                    <div class="header-nav  ng-cloak" >
                        <ul class="header-nav-list">
                            <li class="header-nav-item">
                                <a ng-click="refreshList()" href="" class="header-nav-item-link" title="Refresh emails">
                                    <i class="fas fa-sync"></i>
                                </a>
                            </li>
                            <li class="header-nav-item">
                                <a ng-click="markReadAll()" href="" class="header-nav-item-link" title="Mark all emails as read">
                                    <i class="fas fa-check-double"></i>
                                </a>
                            </li>
                            <li class="header-nav-item">
                                <a  ng-click="deleteAll()" href="" class="header-nav-item-link" title="Delete all emails">
                                    <i ng-if="deleteAllSafeguard" class="fas fa-trash-alt"></i>
                                    <i ng-if="!deleteAllSafeguard" class="fas fa-trash-alt danger"></i>
                                </a>
                            </li>
                            <li class="header-nav-item">
                                <a ng-click="toggleDarkTheme()" href="" class="header-nav-item-link" title="Toggle between light and dark theme">

                                    <i ng-if="settings.darkThemeEnabled" class="fas fa-sun"></i>
                                    <i ng-if="!settings.darkThemeEnabled" class="fas fa-moon"></i>
                                </a>
                            </li>
                            <li class="header-nav-item">
                                <a ng-click="toggleNavMore($event)" href="" class="header-nav-item-link" title="Additional configuration">
                                    <i class="fas fa-cog"></i>
                                </a>
                            </li>
                        </ul>

                        <div class="header-nav-more" ng-click="headerNavStopPropagation($event)">
                            <ul class="dropdown-menu header-nav-more-menu" ng-class="{ open: navMoreOpen }">
                                <li>
                                    <label
                                        class="header-nav-switch"
                                        ng-class="{ disabled: !notificationsSupported }"
                                        for="toggle-notifications"
                                        title="Notifications are supported on localhost or via https">
                                            <input
                                            type="checkbox"
                                            name="notifications"
                                            id="toggle-notifications"
                                            ng-disabled="!notificationsSupported"
                                            ng-checked="settings.notificationsEnabled"
                                            ng-click="toggleNotifications()"/>
                                            Browser notifications
                                    </label>
                                </li>
                                <li>
                                    <label
                                        class="header-nav-switch"
                                        for="toggle-auto-show" >
                                            <input
                                            type="checkbox"
                                            name="auto-show"
                                            id="toggle-auto-show"
                                            ng-checked="settings.autoShowEnabled"
                                            ng-click="toggleAutoShow()"/>
                                            Open new mail
                                    </label>
                                </li>
                            </ul>
                        </div>

                    </div>




                </div>




                <div class="sidebar-emails-container ">
                    <div class="search-container ng-cloak">
                        <input type="text" ng-model="search" class="search-input" placeholder="Search...">
                        <i class="fas fa-search search-icon"></i>
                    </div>
                    <div class="sidebar-scrollable-content ng-cloak">

                        <div ng-if="itemsLoading" class="emails-loading">
                            Loading...
                        </div>

                        <div ng-if="!itemsLoading && items && !items.length" class="emails-empty">
                            No emails
                        </div>

                        <ul class="email-list">
                            <li ng-repeat="item in items | orderBy:'time':!reverse | filter: search " class="email-item  email-{{item.id}} " ng-class="{current: item.id === currentItemId, read: item.read, unread: !item.read}">
                                <a href="#/email/{{item.id}}" class="email-item-link">
                                    <span class="title">
                                        {{item.subject}}<span ng-hide="!item.attachments">&nbsp;<i class="fas fa-paperclip" ></i></span>
                                        <span class="title-subline" title="{{item.to}}">
                                            To:&nbsp;{{item.to.0.address}}&nbsp;<span ng-if="item.to.length > 1">+{{item.to.length-1}}</span>
                                        </span>
                                    </span>
                                    <span class="subline">
                                        {{item.time | date:'yyyy-MM-dd HH:mm:ss (Z)' }}
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>




            <div class="main-container ng-cloak">
                <div class="email-container" ng-view></div>
            </div>



        </div>




        <script src="components/angular/angular.min.js"></script>
        <script src="components/angular-resource/angular-resource.min.js"></script>
        <script src="components/angular-route/angular-route.min.js"></script>
        <script src="components/angular-sanitize/angular-sanitize.min.js"></script>
        <script src="components/angular-cookies/angular-cookies.min.js"></script>
        <script src="components/socket.io/socket.io.min.js"></script>

        <script src="scripts/app.js"></script>
        <script src="scripts/services.js"></script>
        <script src="scripts/components/address.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/item.js"></script>

    </body>
</html>
